<template>
    <div class="itemTodo">
        <input 
            type="checkbox" 
            :checked="item.status === Finished"
            @click="setStatus( item.id )"
        />
        <span
            :class="item.status === Finished ? 'line-throw' : '' "
        >
            {{ item.content }}
        </span>
        <button @click="removeTodo( item.id )">删除</button>
        <button 
            v-if="item.status !== Finished " 
            @click="setDoing( item.id )"
            :class="item.status === Doing ? 'doing' : 'willDo' "
        > {{ item.status === Doing ? '正在做...' : '马上做' }} </button>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { ITodo, TODO_STATUS } from '../../typeings/index';

interface IStatusState {
    Finished : TODO_STATUS;
    Doing : TODO_STATUS;
    willDo : TODO_STATUS;
}

export default defineComponent({
    name: 'TODOITEM',
    props : {
        item : {
            type : Object as PropType<ITodo>,
            default: () => {
                return {}
            }
        }
    },
    emits: ['removeTodo','setStatus','setDoing'],
    setup ( props , { emit }) {
        
        const statusState  = <IStatusState>{
            Finished : TODO_STATUS.Finished,
            Doing : TODO_STATUS.Doing,
            willDo : TODO_STATUS.WillDo
        }

        const removeTodo = (id : number) : void => {
            emit('removeTodo',id)
        }

        const setStatus = (id : number) : void => {
            emit('setStatus',id)
        }

        const setDoing = (id : number) : void => {
            emit('setDoing',id)
        }
        
        
        return {
           ...statusState,
           removeTodo,
           setStatus,
           setDoing
        }
    }
});
</script>

<style  scoped>
.line-throw{
    text-decoration: line-through;
}
.doing{
    background-color: #cdcdcd;
    color: blue;
}
.willDo{
    background-color: #ff6700;
    color: #fff;
}
.itemTodo{
    display: flex;
}
</style>